<script lang="ts" setup>
import emitter from "~/utils/mitt";

let commentsList = defineProps({
    commentList: '' as any,
    count: 0 as any
});
const props = ref({
    name: '',
    replyParentId: ''
})

function getCaptchaRespond() {
    emitter.emit('getCaptchaRespond')
}
async function clickReply (name:any,parentId:any) {
    props.value.name = name
    props.value.replyParentId= parentId
    await sessionStorage.setItem('replyData', JSON.stringify(props.value))
    emitter.emit('replyUserInfo')
    emitter.emit('getCaptchaReply')
}
</script>


<template>
    <div class="aside-comment">
        <CommetRespond />
        <div id="comments" class="comments-area">
            <div class="comments-title-top fade-before fade-after">
                <h6 class="comments-title">{{ commentsList.count }}条评论</h6>
                <a data-fancybox data-src="#respond" href="javascript:" class="comment-form-button"
                   role="button" @click="getCaptchaRespond">发表评论</a>
            </div>
            <ol class="comment-list">
                <template v-for="item in commentsList.commentList" :key="item.id">
                    <li :id="'comment-'+item.id" class="comment even thread-even depth-1 fade-before fade-after"
                        :num="item.id" :rating="item.isRecommend">
                        <article :id="'div-comment-'+item.id" class="comment-body">
                            <header class="user-meta">
                                <div class="comment-author">
                                    <div class="user-avatar">
                                        <img alt=""
                                             :src="item.avatar"
                                             class="avatar avatar-50 photo loaded" height="50"
                                             width="50" loading="lazy" decoding="async"
                                             @error="handleErrorFriendAvatar($event,String(item.nickname).charAt(0),'27B3BC')">
                                    </div>
                                    <cite>
                                        <a target="_blank" :href="'/user/'+item.userId" class="url" rel="ugc external nofollow">{{ item.nickname }}</a>
                                    </cite>
                                    <div class="comment-metadata">
                                        <a class="grade-card" :title="item.badge?item.badge: item.nickname"></a>
                                    </div>
                                </div>
                            </header>
                            <!-- .comment-author -->
                            <footer class="comment-meta">
                                <a class="comment-time" :href="'#comment-'+item.id">
                                    <time :datetime="item.createTime">
                                        {{ item.createTime }}
                                    </time>
                                </a>
                            </footer><!-- .comment-meta -->
                            <div class="comment-content">
                                <p>{{ item.commentContent }}</p>
                                <div class="reply">
                                    <a rel="nofollow" class="comment-reply-link"
                                       href="javascript:"
                                       data-fancybox
                                       data-src="#reply-to-user"
                                    @click="clickReply(item.nickname,item.id)"></a>
                                </div>
                                <!-- reply -->
                            </div>
                        </article>
                        <img class="comment-corner-mark" :src="randomCornerMark()" alt="mark">
                        <CommetChildren :childrenList="item.replyDTOs"/>
                    </li>
                </template>
                <CommetReply/>
            </ol>
        </div>
    </div>
</template>
<style scoped>
body.page-template-page-board .comment-list .depth-1 {
    backdrop-filter: blur(20px) saturate(1.5);
}
.comment-corner-mark{
  height: 2rem;
  position: absolute;
  top: 0;
  right: 0.5rem;
  transform: scale(.88);
  transform-origin: right;
}
</style>
